<template>
  <div class="my-exam">     
    <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
      <tab-item selected @on-item-click="onItemClick">成年</tab-item>
      <tab-item @on-item-click="onItemClick">少年</tab-item>
      <tab-item @on-item-click="onItemClick">儿童</tab-item>
    </tab>
    <div class="ad-img" @click="router({path: './talent'})">
      <img src="@/assets/ceshijieguo01.png" alt="">
      <div class="cr" v-if="num == 0">
        <p class="cr-title">今日剩余5次</p>
        <p class="cr-tip">每日都可重新测试哦~</p>
      </div>      
      <p class="title" v-else>现在去测试</p>
    </div>    
    <div class="list">
      <div class="item">
        <span>
          <img src="@/assets/ceshijieguo02.png" class="item-img" alt="">
          <!-- <img src="@/assets/ceshijieguo03.png" class="none-img" alt=""> -->
        </span>        
        <div class="cons">
          <p class="title">木+水属性</p>
          <p class="time">2018.11.15 14:24</p>
        </div>
        <img src="@/assets/jiantou.png" class="arrow" alt="">
      </div>
      <div class="item">
        <span>
          <img src="@/assets/ceshijieguo03.png" class="none-img" alt="">
        </span>        
        <div class="cons">
          <p class="title">木+水属性</p>
          <p class="time">2018.11.15 14:24</p>
        </div>
        <img src="@/assets/jiantou.png" class="arrow" alt="">
      </div>
    </div>
  </div>
</template>

<script>

  import { Tab, TabItem } from 'vux'

  export default {
    components: {
      Tab,
      TabItem,
    },
    data () {
      return {
        is_check: true,
        num: 0,
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.num = index
        console.log('on item click:', index)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.my-exam
  width 100%
  height 100vh
  overflow hidden
  background-color #fff
  .list-tab
    padding-top 5rem
    .vux-tab-container
      height 5rem
      .vux-tab-item.vux-tab-selected
        font-weight bold
      .vux-tab-item
        color #000
        font-size 1.6rem
        font-weight 400
  .ad-img
    padding 2rem 1.5rem
    box-sizing border-box
    position relative
    .title
      line-height 8rem
      top 2rem
      font-size 1.7rem
      font-weight bold
    p
      position absolute
      left 0
      width 100%
      color #F5F5F5
      text-align center
    .cr-title
      font-weight bold
      font-size 1.7rem
      top 3.8rem
      line-height 1.7rem
      height 1.7rem
    .cr-tip
      font-weight 500
      top 6.6rem
      font-size 1.1rem
      height 1.2rem
      line-height 1.2rem
  .list
    .item
      background-color #F5F6FA
      height 7rem
      margin 0 1.5rem
      position relative
      border-radius .3rem
      margin-bottom 1.5rem
      span
        width 9rem
        text-align center
        position absolute
        left 0
        top 1.6rem
        img
          display inline-block
        .item-img
          width 6rem
        .none-img
          width 4rem
      .cons
        position absolute
        left 9rem
        .title
          color #333
          font-size 1.7rem
          font-weight 500
          line-height 1.7rem
          height 1.7rem
          margin-bottom 1rem
          margin-top 1.4rem
        .time
          font-size 1.2rem
          color #999
          font-weight 500
          line-height 1.2rem
          height 1.2rem
      .arrow
        position absolute
        right 1.5rem
        width .6rem
        top 3rem
</style>
